<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charast="UTF-8">
    <title>个人简介</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 30px;
            font-family: 方正小标宋_GBK;
        }
        #container{
            margin: 0 auto;
            width: 1500px;
            text-align: center;
        }
        #header{
            height: 80px;
            background-color: cornsilk;
        }
        #main{
            height: 560px;
            width: 1500px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        #aside{
            float: left;
            width: 350px;
            height: 560px;
            background-color: cornflowerblue;
        }
        #content{
            float: left;
            width: 1145px;
            height: 560px;
            margin-left: 5px;
            background-color: yellowgreen;
            font-size: 20px;
        }
        #footer{
            height: 80px;
            background-color: darkorange;
        }
        ul{
            list-style-position: inside;
        }
        image{
            height: 450px;
        }
    </style>
    </head>
    <body>
        <div id="container">
            <div id=header>个人介绍</div>
            <div id="main">
            <div id="aside">                
                <ul>
                <li><a href="#" type="radio" name="sex" id="button1" onclick="show1()">关于本人</a></li>
                <li><a href="#" type="radio" name="sex" id="button1" onclick="show2()">为什么加入星辰？</a></li>
                <li><a href="#" type="radio" name="sex" id="button1" onclick="show3()">写在最后</a></li>
                
                </ul>
            </div>
            <div id="content">
                    <div style="display:none" id="div1">
                    <p><!--基本信息-->
                        各位学长学姐们好，我是信软学院2021级新生唐镱鑫（跟唐艺昕同音），今年18岁，来自重庆合川，平时喜欢玩游戏（手游，PC，桌游，剧本杀等都有涉猎），阅读，看电影，吃吃吃，但体育方面不太在行.
                        我的性格较为热情开朗，社交牛杂症患者本人了属于是（狗头。jpg）.
                    </p>
                    <img src="images/22.jpg" alt="LLL">
                    </div>
                    <div style="display:none" id="div2">
                    <p>一、据我的了解，星辰是一个以接项目为主的工作室，我想借助星辰这个大舞台来积累自己的写代码经验以及学习一些新的技能
                    </br>
                       二、加入星辰我可以结交到更多优秀的学长学姐，以后不光是学业还是生活上的难题我都可以找到请教的平台
                    </br>
                       三、我也可以在这里找到志气相投的同辈们，与他们一起愉快的交流与<del>van</del>学习
                    </br>
                       四、我觉得星辰是一个温暖的大家庭，如果有幸能加入星辰，那么我一定会油然而生地产生归属感</p>
                    <img src="images/33.jpg" alt="LLL">
                    </div>
                    <div style="display:none" id="div3">
                    <p>虽然我学前端一个月了，但html，css，js都不熟练（尤其是js），到现在也只能做出一些粗糙简陋的网页（手动狗头），但我有一颗渴望上进，虚心求学的心，同时我也不怕困难与挫折，如果我有幸能进入星辰，那我一定会更加努力地学习前端知识，毕竟我的目标可是星辰大海，请各位学长学姐给我一次机会吧QAQ
                    </br>
                    最后我想对各位学长学姐们说一声抱歉，由于是在最后几天赶制的任务3.1，所以没来得及做转换动画以及后续的任务3.2，请各位学长学姐给小萌新一个机会吧QAQ
                    </p>
                    <img src="images/44.jpg" alt="LLL">
                    </div>       
            </div>
            </div>
            <div id="footer"></div>
        </div>
        <script>
            function show1(){
            document.getElementById("div1").style.display="block";
            document.getElementById("div2").style.display="none";
            document.getElementById("div3").style.display="none";
            };
            function show2()
            {
            document.getElementById("div2").style.display="block";
            document.getElementById("div1").style.display="none";
            document.getElementById("div3").style.display="none";
            }
            function show3()
            {
            document.getElementById("div3").style.display="block";
            document.getElementById("div2").style.display="none";
            document.getElementById("div1").style.display="none";
            }
            </script>
    </body>
</html>